<template>
  <view class="container screen-width">
    <view class="list">
      <view v-for="(item,index) in personList" :key="item.id" class="list-content">
        <view class="list-item" @click="toPersonDetail(item)">
          <view class="top flex space-between items-middle">
            <view class="flex item items-middle">
              <view class="name">{{ item.name || '--' }}</view>
              <view class="post">{{ item.position || '--' }}</view>
            </view>
            <view
              v-if="isShow === '1'"
              class="right flex item items-middle"
              @click.stop="onTop(item)"
            >
              <!-- <view class="save-phone">储存到通讯录</view> -->
              <VIcon type="icon-zhiding" color="#333333" size="36" />
            </view>
          </view>
          <view class="flex item items-middle">
            <VIcon type="icon-dianhua" color="#1678ff" size="34" />
            <view class="lable">电话</view>
            <view class="lable-content">{{ item.phoneNumber || '--' }}</view>
          </view>
          <view class="flex item items-middle">
            <VIcon type="icon-email-s" color="#1678ff" size="34" />
            <view class="lable">邮件</view>
            <view class="lable-content">{{ item.email || '--' }}</view>
          </view>
          <view class="flex item items-top">
            <VIcon type="icon-dizhi" color="#1678ff" size="34" />
            <view class="lable">地址</view>
            <view class="lable-content">{{ item.companyAddress || '--' }}</view>
          </view>
          <view v-if="isShow === '1'" class="more" @click.stop="showFunBtn(index)">...</view>
        </view>
        <view
          v-show="select && (activeIndex === index)"
          class="fun-btn flex items-middle space-around"
        >
          <view class="flex items-middle" @click="onTop(item)">
            <VIcon class="icon" type="icon-zhiding" color="#333333" size="36" />
            <view>置顶</view>
          </view>
          <view class="flex items-middle" @click="onTelieve(item)">
            <VIcon class="icon" type="icon-jiechuhezuo" color="#333333" size="36" />
            <view>解除</view>
          </view>
          <view class="flex items-middle" @click="toPersonDetail(item)">
            <VIcon class="icon" type="icon-xiangqing" color="#333333" size="36" />
            <view>详情</view>
          </view>
        </view>
      </view>

      <van-divider v-show="personList.length && total < total + 1" content-position="center">我也是有底线的</van-divider>
    </view>
    <Festival></Festival>
  </view>
</template>
<script>
import {
  companyBusinessCardPageList,
  updateCompanyBusinessCardTopStatus,
  updateCompanyBusinessCardBind
} from "../../util/api/company";
export default {
  data() {
    return {
      params: {
        companyId: "",
        pageNo: 1,
        pageSize: 10
      },
      personList: [],
      total: 0,
      activeIndex: 0,
      select: false,
      isShow: ""
    };
  },
  onLoad(e) {
    this.params.companyId = e.companyId;
    this.isShow = e.isShow;
  },
  onShow() {
    if (this.params.companyId) {
      this.params.pageNo = 1;
      this.personList = [];
      this.getPersonList();
    }
  },
  onReachBottom() {
    if (this.personList.length >= this.total) return;
    this.params.pageNo += 1;
    this.getPersonList();
  },
  methods: {
    // 企业管理人列表
    async getPersonList() {
      const data = await companyBusinessCardPageList(this.params);
      this.personList = this.personList.concat(data.result.records);
      this.total = data.result.total;
    },
    // 置顶
    onTop(item) {
      let params = {
        companyId: this.params.companyId,
        status: 1,
        userBusinessCardId: item.id
      };
      updateCompanyBusinessCardTopStatus(params).then(res => {
        if (res.code === 200) {
          this.params.pageNo = 1;
          this.personList = [];
          this.getPersonList();
          uni.$emit("editCard");
          uni.showToast({
            title: "置顶成功",
            icon: "none"
          });
        }
      });
    },
    // 解除绑定
    onTelieve(item) {
      let params = {
        companyId: this.params.companyId,
        userBusinessCardId: item.id
      };
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认解除",
        cancelText: "考虑一下",
        success(res) {
          updateCompanyBusinessCardBind(params).then(res => {
            if (res.code === 200) {
              _this.params.pageNo = 1;
              _this.personList = [];
              _this.getPersonList();
              uni.$emit("editCard");
              uni.showToast({
                title: "解除成功",
                icon: "none"
              });
            }
          });
        }
      });
    },
    // 展示按钮
    showFunBtn(index) {
      if (index !== this.activeIndex) {
        this.activeIndex = index;
        this.select = true;
      } else {
        this.select = !this.select;
      }
    },
    // 去名片详情页
    toPersonDetail(item) {
      uni.navigateTo({
        url: "/pages/person/modified?id=" + item.id
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  // height: 100vh;
  background-color: #dee4f0;
  padding: 15px;
  box-sizing: border-box;

  .list {
    width: 100%;

    .list-content {
      width: 100%;
      margin-bottom: 15px;
    }

    .list-item {
      background: #ffffff;
      width: 100%;
      padding: 15px 20px;
      box-sizing: border-box;
      box-shadow: 0px 1px 7px 0px rgba(132, 202, 187, 0.3);
      border-radius: 5px;
      margin-bottom: 15px;
      position: relative;

      .top {
        .name {
          font-size: 18px;
          font-weight: 700;
          color: #333333;
          margin-right: 10px;
        }

        .post {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
        }

        .right {
          .save-phone {
            font-size: 12px;
            font-weight: 400;
            color: #1678ff;
            border: 1px solid #1678ff;
            border-radius: 5px;
            padding: 2px 5px;
            margin-right: 10px;
          }

          img {
            width: 16px;
            height: 16px;
          }
        }
      }

      .item {
        margin-bottom: 10px;

        img {
          width: 16px;
          height: 16px;
        }

        .lable {
          font-size: 28upx;
          font-weight: 400;
          color: #999999;
          margin: 0 10px;
          width: 66upx;
        }

        .lable-content {
          font-size: 28upx;
          font-weight: 400;
          color: #333333;
          width: 500upx;
          overflow: hidden;
          text-overflow: ellipsis; //修剪文字，超过2行显示省略号
          display: -webkit-box;
          -webkit-line-clamp: 2; //此处为上限行数
          -webkit-box-orient: vertical;
        }
      }

      .more {
        font-size: 18px;
        font-weight: 700;
        color: #1786ff;
        position: absolute;
        right: 20px;
        bottom: 10upx;
      }
    }

    .fun-btn {
      width: 100%;
      background: #f8f9fd;
      padding: 15px 20px;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 400;
      color: #333333;

      .icon {
        margin-right: 10px;
      }
    }
  }
}
</style>